<template>
  <div class="goodlist">
    <myhead title="商城" ></myhead>
    <div class="gbox">
        <div class="left">
            <van-sidebar v-model="active" >
              <van-sidebar-item title="全部商品" />
              <van-sidebar-item :title="l.text"  v-for="(l,i) in types" :key="i" />
            </van-sidebar>
        </div>
        <div class="content">
            <ul class="glist">
              <li class="gitem" v-for="(l,i) in list" :key="i">
                  <router-link :to="{name:'good-detail',params:{goodId:l.id},query:{name:l.name}}">
                      <img :src="l.img" alt="">
                      <h4 class="title">{{l.name}}</h4>
                      <p>
                        <span>分类:{{l.type.text}}</span>  
                        <span>价格: {{l.price}} </span>
                      </p>
                  </router-link>
              </li>
            </ul>
        </div>
    </div>
  </div>
</template>


<script>
export default {
  data(){
    return {
      active:0,
      list:[],
      types:[]
    }
  },
  watch:{
    active(v){
      console.log(v);
      if(v==0){
        this.list = [...this.goodList];
      }else{
        this.list = this.goodList.filter(item=>item.type.value==this.types[v-1].value)
      }

    }
  },
  mounted(){
    this.$ajax.findgoods()
    .then(res=>{
      console.log(res)
        this.changeGoodList(res);
        this.list = res;

        var arr = []
        var obj = {}
        for(var i = 0;i<res.length;i++){
          if(!obj[res[i].type.value]){
              obj[res[i].type.value] = res[i].type.value;
              arr.push(res[i].type)
          }
        }
        console.log(arr)
        this.types = arr;
    })
  }
}
</script>

<style lang="scss" scoped>
.goodlist{
  width:100%;
  .gbox{
    width:100%;
    height:100%;
    overflow: hidden;
    display: flex;
    .left{
      width:90px;
    }
    .content{
      height:100%;
      flex:1;
      overflow: auto;
      background: #fafafa;
      padding:10px;
      .glist{
        
        .gitem{
          margin-top:10px;
          
          a{
            display: block;
            background: #fff;
            border-radius: 10px;
             width:100%;
             padding:10px 0 ;
            img{
              width:100%;
              height:220px;
            }
            .title{
              color:#666;
              font-size: 15px;
              margin-top:5px;
            }
            p{
              display: flex;
              justify-content: space-between;
               font-size: 13px;
                margin-top:5px;
            }
          }
        }
      }
    }
  }
}
</style>
